<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./css//bootstrap.min.css">
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .containner{
                
                /* background: white; */
                margin-top: 200px;
                display: flex;
                justify-content: center;
            }
            .box{
                width: 40%;
                background-color: whitesmoke;
                padding: 30px 70px;
                border-radius: 20px;
            }
            .form-item{
                width: 90%;
                display: flex;
                display: flex;
                align-items: center;
            }
            .label{
                display:inline-block;
                min-width: 80px;
                width: 100px;
                text-align: justify;
                text-align-last: right;
                letter-spacing: 3px;
            }
            body{
                background-image: url(./images/bg.jpg);
                background-size: cover;
                background-repeat: no-repeat;
            }
            .mybtn{
                width: 80%;
                margin-left: 20px;

            }
        </style>
    </head>

    <body>
        <div class="containner">
            <div class="box">
                <form onsubmit="return submitForm">
                    <div class="form-item">
                        <span class="label">用户名</span>：
                        <input type="text" required id="username" style="width:60%;display: inline-block;" class="form-control" placeholder="请输入用户名" aria-describedby="basic-addon1">
                    </div>
                    <br>
                    <div class="form-item">
                        <span class="label">密码</span>：
                        <input type="password" id="password" required style="width:60%;display: inline-block;" class="form-control" placeholder="请输入密码" aria-describedby="basic-addon1">
                    </div>
                    <br>
                    <div class="form-item">
                        <span class="label">角色</span>：
                        <select style="width:60%;display: inline-block;" id="role" class="form-control form-control-sm">
                            <option value="">--请选择--</option>
                            <option value="普通用户">普通用户</option>
                            <option value="管理员">管理员</option>
                            <option value="超级管理员">超级管理员</option>
                        </select>
                    </div>
                    <br>
    
                    <!-- 兴趣爱好 -->
                    <div class="form-item">
                        <span class="label">爱好</span>：
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="hobby" value="篮球">
                            <label class="form-check-label" for="inlineCheckbox1">篮球</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="hobby" value="游泳">
                            <label class="form-check-label" for="inlineCheckbox2">游泳</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="hobby" value="跑步">
                            <label class="form-check-label" for="inlineCheckbox2">跑步</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="hobby" value="听音乐">
                            <label class="form-check-label" for="inlineCheckbox2">听音乐</label>
                        </div>
    
                    </div>
                    <br>
    
                      
                    <div class="form-item">
                        <span class="label">性别</span>：
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="gender" id="inlineRadio1" value="0">
                            <label class="form-check-label" for="inlineRadio1">男</label>
                          </div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="gender" id="inlineRadio2" value="1">
                            <label class="form-check-label" for="inlineRadio2">女</label>
                          </div>
                    </div>
                    <br>
              
                    <button class="btn btn-primary mybtn" type="button" onclick="return submitForm()">提交</button>
                    <br><br>
                    <input class="btn btn-danger mybtn" type="reset" value="重置"></input>
                </form>
            </div>
          
            
        </div>
        
    </body>
    <!-- 引入jquery库 -->
    <script src="./js/jquery.min.js"></script>
    <script>
        //提交表单函数
        function submitForm(){
            var username = $('#username').val();
            var password = $('#password').val();
            var role = $("#role").val();
            var gender = $("input[name='gender']:checked").val();
            var hobby = "";
            $('input[name="hobby"]:checked').each(function(){
                //将选中的值添加到hobbys中,以逗号隔开
                if(hobby != ""){
                    hobby = hobby + ","+$(this).val();
                }else{
                    hobby = $(this).val()+"";
                }
            });

            //判空操作，任何一个表单项为空，都不能成功提交
            if(isEmpty(username) || isEmpty(password) || isEmpty(role) || isEmpty(gender) || isEmpty(hobby)){
                alert("表单项存在空值，请检查")
            }else{
                console.log("异步请求成功")
                var formData = {
                    username,password,role,gender,hobby
                }
                //发起异步请求到后端，后端接受到请求后保存到数据库
                $.ajax({
                    url:'http://localhost:8888/user/save',
                    method:'POST',
                    contentType:'application/json',
                    data:JSON.stringify(formData),
                    success(){
                        alert("提交成功，已保存到数据库！")
                    },
                    error(){
                        alert("提交失败，请检查错误")
                    }
                })
            }
            
        }

        //判空函数
        function isEmpty(obj){
            if(obj == undefined || obj == "" || obj.trim() == ""){
                return true;
            }
            return false;
        }
      
      
    </script>
</html>